<template>
	<view style="height: 40px;background-color: white;">
		<view style="position: absolute;right: 80px;left:80px;top:10px;">
			<uv-subsection :list="list" mode="button" :current="current" @change="subchange" activeColor="#4169E1"
				inactiveColor="#9AFF9A" bgColor="#4169E1" >
			</uv-subsection>
		</view>
	</view>
	<view style="background-color: white;">
		<uni-search-bar clearButton="auto" cancelButton="none" @click="hanldeClick" :placeholder="$t('aqiRank.search')" v-model="searchDate" bgColor="#EEEEEE" @confirm="search" @tap="dateOpen"
		/>
	</view>
	<view class="header" style="width: 100%;">
		<uni-row>
			<uni-col :span="12">
				<uv-tabs :list="rValue" @change="tabChange" customStyle="height: 50px;line-height:80px;"
					:activeStyle="{color: '#303133',fontWeight: 'bold',	transform: 'scale(1.05)'}"></uv-tabs>
			</uni-col>
			<uni-col :span="12">
				<uni-row>
					<uni-col :span="24">
						<uni-data-picker class="picker" clear-icon v-model="value" :localdata="range" @change="change">
						</uni-data-picker>
					</uni-col>
					<!-- <uni-col :span="12">
						<uni-data-picker class="picker"  v-model="value" :localdata="range" @change="change">
						</uni-data-picker>
					</uni-col> -->
				</uni-row>
			</uni-col>
		</uni-row>
	</view>
	<view class="border" style="width: 100%;background: white;" v-for="(item,index) in rank">
		<view class="list_rank">
			<text class="site_id">{{index+1}}</text>
			<text class="site_title">{{item.site}}</text>
			<text class="site_value" :style="{'background-color':item.color}">{{item.value}}</text>
		</view>
		<!-- 		<uni-list>:style="{'background-color':labelColor}"
			<uni-list :border="true" v-for="(item,index) in rank">
				<uni-list-item :title="item.site" :note="item.value"
					thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg"
					:rightText="item.rank" />
			</uni-list>
		</uni-list> -->
	</view>
	<view>
		<uv-datetime-picker ref="datetimePicker" :cancelText="$t('system.cancel')" :confirmText="$t('system.confirm')"
			v-model="vDate" :mode=Ymode  @confirm="dateConfirm" @focus="hanldeClick"></uv-datetime-picker>
	</view>
</template>

<script>
	import {
		aptSwitch,
	} from "@/common/apt"
	import {
		formatDate,
		formatDateYear,
	} from "@/common/tools"
	
	export default {
		components: {},
		data() {
			const date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate().toString().padStart(2, '0');
			
			return {
				//uv-subsection
				list: [this.$t("aqiRank.day"), this.$t("aqiRank.month")],
				current: 0,
				keyword: '水调歌头',
				searchDate:"",
				
				Ymode: 'date',
				vDate: y+'-'+m+'-'+d,

				rValue: [{
					name: this.$t('aqiRank.best')
				}, {
					name: this.$t('aqiRank.worse')
				}],
				value: 0,
				range: [{
						value: 0,
						text: "aqi"
					},
					{
						value: 1,
						text: "pm25"
					},
					{
						value: 2,
						text: "pm10"
					}
				],
				rank: [],
				avatarList: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}],
				sort: "asc",
				currentStatus: {}
			}
		},
		onReady() {
			this.currentStatus = {
				detail: {
					value: [{
						value: 0,
						text: "aqi"
					}]
				}
			};
			this.change(this.currentStatus);
		},
		methods: {
			change(e) {
				this.currentStatus = e;
				console.log("e", e.detail.value[0].text);
				// console.log(e.detail.value.text)
				this.dataReq();
			},
			
			dataReq(){
				let data = {
					"manner": this.currentStatus.detail.value[0].text,
					"sort": this.sort,
					"date": this.searchDate,
				}
				this.$request(this.$api.rank, data).then(res => {
					if (res.code === 1) {
						this.rank = res.result;
						// console.log(res.result)
						this.rank.forEach(res => {
							let aptResult = aptSwitch(res.value)
							res["color"] = aptResult.color;
						});
					}
				});
			},
			
			subchange(index) {
				this.current = index;
				if(index == 0)
				{
					this.Ymode = "date"
				}else{
					this.Ymode = "year-month"
				}
				this.searchDate = ""
			},
			tabChange(e) {
				console.log(e);
				if (e.index == 0) {
					this.sort = "asc";
				} else {
					this.sort = "desc";
				}
				this.change(this.currentStatus);
			},
			dateOpen(e){
				uni.hideKeyboard();
				this.$refs.datetimePicker.open();
			},
			dateConfirm(e){
				console.log(e)
				if (this.Ymode == "year-month") {
					this.searchDate = formatDateYear(e.value);
				}else if(this.Ymode = "date")
				{
					this.searchDate = formatDate(e.value);
				}
				this.dataReq();
			},
			hanldeClick() {
				// 阻止默认行为
				console.log("aaa");
				uni.hideKeyboard();
			}
		}
	}
</script>

<style lang="scss">

	.search_btn {
		height: 35px;
		margin-left: 10px;
		text-align: 35px;
		font-size: 15px;
		line-height: 35px;

		uni-icons {
			color: white;
		}
	}

	.sort {
		text-align: right;
		background: white;
	}

	.header {
		height: 70px;
		background: white;
		width: 100%;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.picker {
		margin-top: 6px;
		margin-right: 8px;
	}

	.list_rank {
		height: 60px;
		width: 90%;
		background-color: white;
		line-height: 60px;
		border-top: 1px solid #BEBEBE;
		margin: 0px auto;

		.site_id {
			margin-left: 10px;
		}

		.site_title {
			margin-left: 50px;
			white-space:nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.site_value {
			line-height: 40px;
			float: right;
			color: white;
			margin-right: 10px;
			border-radius: 30px;
			background-color: green;
			padding-left: 30px;
			padding-right: 30px;
			margin-top: 10px;
		}
	}
</style>